<template>
  <div>
    <el-card class="card" shadow="never">
      <el-form>
        <el-form-item label="工厂介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" :rows="4" placeholder="请输入梁场介绍"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" size="small" @click="change">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="table-operation">
      <el-upload ref="imgUpload" :on-success="imgSuccess" :class="{ hide: false }" :show-file-list="false"
        accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" :headers="headers" :action="upLoadUrl" multiple>
        <el-button type="primary">添加图片</el-button>
      </el-upload>
    </div>
    <el-table :data="resData" border>
      <el-table-column label="序号" type="index" width="50px"></el-table-column>
      <el-table-column prop="image" label="图片">
        <template slot-scope="scope">
          <el-image :lazy="true" style="width: 100px; height: 100px" :src="scope.row.path" :preview-src-list="[scope.row.path]" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定删除吗？"
             @confirm="handleDelete(scope)"
          >
            <el-button slot="reference">删除</el-button>
          </el-popconfirm>
          <!-- <el-link type="primary" @click="handleDelete(scope)" :underline="false">删除</el-link> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import { getDetail, changeDetail, saveImage, delImage } from '@/api/introduce'
import request from '@/utils/request'
export default {
  data() {
    return {
      upLoadUrl: '/steel-arch/client/project/upload',
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      resData: [],
      tableData: [

      ],
      editorContent: '',
      form: {

        introduce: "",
      },
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    change() {
      changeDetail(this.form.introduce).then(res => {
        if(res.success){
          this.$message({
            message: '保存成功！',
            type: 'success'
          });
          let a = res || [];
        }
      });
    },

    async test(data) {
      let bookInfoArr = await Promise.all(
        data.map(async (itemSon) => {
          return (async () => {
            let result = await request({ url: "/steel-arch/client/file/download?path=" + itemSon.path, method: 'get' })
            return result;
          })();
        }),
      );
      let list = [];
      bookInfoArr.map((item) => {
        let url = 'data:image/png;base64,' + item.data;
        list.push({ path: url });
      })
      this.tableData = list;
    },
    async init() {
      getDetail().then(res => {
        if (res && res.data && res.data.imageList) {
          this.resData = res.data.imageList
          this.form.tableData = res.data.imageList;
          this.test(res.data.imageList)

        }
        if (res && res.data && res.data.content) {
          this.form.introduce = res.data.content
        }
      });
    },
    imgSuccess(res, file) {
      if (res.success == true) {
        setTimeout(() => { this.init() }, 500)
      } else {
        this.$message.error('图片插入失败');
      }
    },
    handleDelete(item) {
      let index=item.$index;
      let data = this.form.tableData[index]
      delImage(data).then(res => {
        this.init();
      })
    }
  }

};
</script>
<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
}

.notice {
  ::v-deep .el-form-item__content {
    margin-left: 68px;
  }
}
</style>
